<template>
  <input type="text" @input="e => {
    text = e.target.value
  }" @keyup="e => {
    if (e.key == 'Enter') getInput()
  }">
  <button @click="getInput" tabindex="-1">add</button>

  <span>
    <input type="checkbox" name="readonly" @change="e => {
      readonly = e.target.checked
    }">
    <span @click="e => {
      e.target.previousElementSibling.click()
    }">只读</span>
  </span>

  <span class="warn" v-if="warn.msg" :class="'msg ' + warn.class">{{ warn.msg }}</span>

  <ul v-for="(val, key) in wordSet" id="wordSetWrap">
    <li>
      <span>{{ key }}</span>
      <input v-if="!readonly" type="text" @input="e => {
        // 临时
        wordSet[key].__TEMP_mean__ = e.target.value
      }" @keyup="e => {
    if (e.key == 'Enter') {
      wordSet[key].mean = wordSet[key].__TEMP_mean__
      delete wordSet[key].__TEMP_mean__
    }
  }">
      <button @click="() => {
        // 临时变永久，删除临时
        wordSet[key].mean = wordSet[key].__TEMP_mean__
        delete wordSet[key].__TEMP_mean__
      }" v-if="!readonly && val.__TEMP_mean__">保存</button>

      <div v-if="val.mean">
        <h3>释义</h3>
        <p class="desc_item word_mean">{{ val.mean }}</p>
      </div>

      <!-- ------------------- -->
      <div v-if="val.example">
        <h3>e.g.</h3>
        <ul class="example_wrap" v-for="content in val.example">
          <li>
            <textarea v-if="!readonly" @input="e => {
              wordSet[key].__TEMP_eg__ = e.target.value
            }" @keyup="e => { if (e.ctrlKey && e.key == 'Enter') { content.text = e.target.value } }" name="" id="" cols="60"
              rows="2"></textarea>
            <button v-if="!readonly" @click="() => {
              content.text = wordSet[key].__TEMP_eg__
            }">保存</button>

            <p class="desc_item">{{ content.text }}</p>
          </li>
        </ul>
      </div>


      <div v-if="!readonly">
        <select name="" id="" @change="e => {
          wordSet[key].__TEMP_next__ = e.target.value
        }">
          <option value="example">例句</option>
          <option value="derive">派生</option>
          <option value="note_html">笔记（html）</option>
          <option value="note_md">笔记（md）</option>
        </select>
        <button @click="() => {
          let item_add = val.__TEMP_next__ ? val.__TEMP_next__ : 'example'

          if (wordSet[key][item_add]) {
            wordSet[key][item_add].push({})
          } else {
            wordSet[key][item_add] = [{}]
          }
        }">添加</button>


        <!-- 删除 -->
        <span class="del" @click="() => {
          delete wordSet[key]
        }">删除</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const text = ref('')
const wordSet = ref({})
const readonly = ref(false)

const warn = ref({
  msg: null,
  class: ''
})

onMounted(() => {
  const url_search = new URLSearchParams(location.search)
  console.log(url_search.get('ws_port'));
})

function getInput() {
  if (wordSet.value[text.value]) {
    warn.value = {
      msg: '数据重复',
      class: 'err'
    }
  } else {
    wordSet.value[text.value] = {}
    warn.value.msg = null
  }
}
</script>

<style lang="less">
html {
  font-size: 24px;
}

body {
  width: 70%;
  margin: 0 auto;
  transition: all .3s;
}

@media screen and (max-width: 72rem) {
  body {
    width: 100%;
  }
}

.msg {
  margin-left: 2em;

  .err {
    color: #ff0000;
  }
}

#wordSetWrap {
  >li {
    position: relative;
    background: #00000022;
    list-style-type: none;

    h3 {
      text-indent: 1em;
    }

    .del {
      background: red;
      position: absolute;
      right: 0;
      top: 0;
    }

    .desc_item {
      text-indent: 2em;
    }
  }
}

.example_wrap {
  width: 90%;
  resize: none;
}
</style>